<template>
  <div>
    <!-- 面包屑导航 -->
    <div class="crumbs">
      <el-breadcrumb separator="/">
        <el-breadcrumb-item>
          <i class="el-icon-lx-cascades"></i> 合同注销
        </el-breadcrumb-item>
      </el-breadcrumb>
    </div>

    <!-- 搜索区域 -->
    <div class="handle-box">
      <el-select
        v-model="query.contractType"
        placeholder="合同类别"
        class="handle-selectmr10"
        style="width: 130px"
      >
        <el-option key="0" label="请选择" value=""></el-option>
        <el-option key="1" label="刑事案件" value="刑事案件"></el-option>
        <el-option key="2" label="民事案件" value="民事案件"></el-option>
        <el-option key="3" label="行政案件" value="行政案件"></el-option>
        <el-option key="4" label="经济案件" value="经济案件"></el-option>
      </el-select>

      <el-input v-model="query.contractName" placeholder="合同名称" class="handle-inputmr10" style="width: 200px;"></el-input>

      <el-button type="primary" icon="Search" @click="handleSearch">搜索</el-button>
    </div>

    <!-- 核心表格：一条数据对应一行 -->
    <el-table
      :data="currentPageContracts"
      border
      stripe
      style="width: 100%; margin: 16px 0;"
      :header-cell-style="{ 'background-color': '#f5f7fa', 'font-weight': 500 }"
      :row-class-name="( { row, rowIndex } ) => rowIndex % 2 === 0 ? 'even-row' : 'odd-row'"
    >
      <!-- 序号列 -->
      <el-table-column type="index" label="序号" width="80" align="center"></el-table-column>
      <!-- 合同编号 -->
      <el-table-column prop="contractNumber" label="合同编号" width="140" align="center"></el-table-column>
      <!-- 合同名称 -->
      <el-table-column prop="contractName" label="合同名称" width="180" align="center"></el-table-column>
      <!-- 合同类型 -->
      <el-table-column prop="contractType" label="合同类型" width="120" align="center"></el-table-column>
      <!-- 律师姓名 -->
      <el-table-column prop="lawyerName" label="律师姓名" width="120" align="center"></el-table-column>
      <!-- 注销原因（重点标红） -->
      <el-table-column prop="cancellationReason" label="注销原因" min-width="200" align="center">
        <template #default="scope">
          <span class="cancel-reason">{{ scope.row.cancellationReason }}</span>
        </template>
      </el-table-column>
      <!-- 注销日期 -->
      <el-table-column prop="cancellationDate" label="注销日期" width="160" align="center"></el-table-column>
      <!-- 经办人 -->
      <el-table-column prop="operator" label="经办人" width="120" align="center"></el-table-column>
      <!-- 备注（可选显示） -->
      <el-table-column prop="remarks" label="备注" min-width="150" align="center">
        <template #default="scope">
          <span>{{ scope.row.remarks || '-' }}</span>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column label="操作" fixed="right" width="140" align="center">
        <template #default="scope">
          <el-button type="primary" size="small" @click="restartContract(scope.row.contractName)" icon="RefreshRight">
            重新启动
          </el-button>
        </template>
      </el-table-column>
    </el-table>

    <!-- 分页控件 -->
    <div class="pagination">
      <el-pagination
        background
        layout="total, prev, pager, next"
        :current-page="query.page"
        :page-size="query.pageSize"
        :total="pageTotal"
        @current-change="handlePageChange"
        style="text-align: center;"
      ></el-pagination>
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, computed, onMounted } from 'vue';
import { getCancelContract, reStart } from '../../api/contract';
import { ElMessage, ElTable, ElTableColumn, ElPagination } from 'element-plus';

// 1. 定义数据类型（类型安全）
interface CanceledContract {
  contractNumber: number | string; // 合同编号
  contractName: string; // 合同名称
  contractType: string; // 合同类型
  lawyerName: string; // 律师姓名
  cancellationReason: string; // 注销原因
  cancellationDate: string; // 注销日期
  operator: string; // 经办人
  remarks?: string; // 备注（可选）
}

interface QueryParams {
  contractType: string; // 合同类型筛选
  contractName: string; // 合同名称筛选
  page: number; // 当前页码
  pageSize: number; // 每页条数
}

// 2. 响应式状态定义
const query = ref<QueryParams>({
  contractType: '',
  contractName: '',
  page: 1,
  pageSize: 10 // 每页默认10条
});

const canceledContracts = ref<CanceledContract[]>([]); // 所有注销合同数据
const pageTotal = ref<number>(0); // 总数据条数

// 3. 计算属性：当前页展示的数据（直接使用表格自带分页，无需手动切片）
const currentPageContracts = computed(() => {
  // 确保数据是数组，避免报错
  return Array.isArray(canceledContracts.value) ? canceledContracts.value : [];
});

// 4. 核心方法
/**
 * 重启合同
 * @param contractName 合同名称
 */
const restartContract = async (contractName: string) => {
  try {
    const res = await reStart(contractName);
    if (res.code === 200) {
      ElMessage.success('合同重启成功');
      getData(); // 重启后刷新数据
    } else {
      ElMessage.error(`重启失败：${res.msg || '服务器异常'}`);
    }
  } catch (error) {
    console.error('重启合同错误：', error);
    ElMessage.error('网络异常，重启失败');
  }
};

/**
 * 获取合同数据（查询/刷新）
 */
const getData = async () => {
  try {
    const res = await getCancelContract(query.value);
    console.log('接口返回数据：', res); // 调试用，可删除

    if (res.code === 200) {
      // 适配后端返回格式（可能是 res.data 或 res.data.list）
      canceledContracts.value = Array.isArray(res.data?.list)
        ? res.data.list
        : Array.isArray(res.data)
          ? res.data
          : [];
      // 总条数（适配后端返回的 total 字段）
      pageTotal.value = res.data?.total || res.pageTotal || 0;
    } else {
      ElMessage.error(`获取数据失败：${res.msg || '未知错误'}`);
      canceledContracts.value = [];
      pageTotal.value = 0;
    }
  } catch (error) {
    console.error('获取合同数据错误：', error);
    ElMessage.error('网络异常，无法获取数据');
    canceledContracts.value = [];
    pageTotal.value = 0;
  }
};

/**
 * 搜索按钮触发
 */
const handleSearch = () => {
  query.value.page = 1; // 搜索时重置到第一页
  getData();
};

/**
 * 分页页码切换
 * @param val 切换后的页码
 */
const handlePageChange = (val: number) => {
  query.value.page = val;
  getData();
};

// 5. 生命周期：页面加载时获取数据
onMounted(() => {
  getData();
});
</script>

<style scoped>
/* 面包屑样式 */
.crumbs {
  margin: 16px 0;
  color: #606266;
}

/* 搜索区域样式 */
.handle-box {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 8px;
}

.handle-selectmr10,
.handle-inputmr10 {
  vertical-align: middle;
}

/* 表格行样式优化 */
::v-deep .el-table {
  border-radius: 4px;
  overflow: hidden;
}

/* 奇偶行背景色区分（增强可读性） */
::v-deep .even-row {
  background-color: #fafafa;
}
::v-deep .odd-row {
  background-color: #fff;
}

/* 表格单元格内边距（避免内容拥挤） */
::v-deep .el-table td,
::v-deep .el-table th {
  padding: 12px 0;
}

/* 注销原因标红（突出重点） */
.cancel-reason {
  color: #f56c6c;
  font-weight: 500;
}

/* 分页区域样式 */
.pagination {
  margin: 20px 0;
}
</style>
